import React, { useEffect } from 'react'
import { Card, Table } from 'antd'
import { useStoreState, useStoreAction } from '@/hooks/useStore'
import store from './stores'
import api from './apis'


const Demo1 = () => {

  const requestList = useStoreAction(store?.requests?.getCourseList)

  const state = useStoreState(store)

  const { loading, pagination, list } = state?.getCourseList || {}

  const request = async () => {
    const template = await api.getTemplateList({ limit: 20, offset: 0 })
    console.log('template ------ ', template)
  }

  useEffect(() => {
    requestList({ pageSize: 20, current: 1 })
  }, [])

  useEffect(() => {
    request()
  }, [])

  const onChange = () => { }

  const columns = [
    {
      title: '课程 ID',
      dataIndex: 'course_id'
    },
    {
      title: '课程名称',
      dataIndex: 'title'
    }
  ]

  return (
    <Card>
      <Table
        rowKey={(record) => record.course_id}
        columns={columns}
        loading={loading}
        pagination={pagination}
        dataSource={list}
        onChange={onChange}
      />
    </Card>
  )
}
export default Demo1
